<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="修改密码"
    append-to-body
    :close-on-click-modal="false"
    width="600px"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
      <el-form-item label="旧密码：" prop="oldPassword">
        <el-input v-model="ruleForm.oldPassword" :type="passwordType" size="small">
          <i v-if="passwordType==='password'" slot="suffix" class="fa fw fa-eye-slash" @click="togglePasswordType" />
          <i v-else slot="suffix" class="fa fw fa-eye" @click="togglePasswordType" />
        </el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" :type="passwordType2" size="small">
          <i v-if="passwordType2==='password'" slot="suffix" class="fa fw fa-eye-slash" @click="togglePasswordType2" />
          <i v-else slot="suffix" class="fa fw fa-eye" @click="togglePasswordType2" />
        </el-input>
      </el-form-item>
      <el-form-item label="确认新密码：" prop="newPassword2">
        <el-input v-model="ruleForm.newPassword2" :type="passwordType2" size="small">
          <i v-if="passwordType2==='password'" slot="suffix" class="fa fw fa-eye-slash" @click="togglePasswordType2" />
          <i v-else slot="suffix" class="fa fw fa-eye" @click="togglePasswordType2" />
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button :loading="loading" size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// 接口
import {
  personChangePwd
} from '@/api/person'

export default {
  name: 'ChangePasssword',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        callback(new Error('密码不得小于6位'))
      } else {
        if (this.ruleForm.newPassword !== '') {
          this.$refs.ruleForm.validateField('newPassword2')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      console.log(value)
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      passwordType: 'password',
      passwordType2: 'password',
      ruleForm: {
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newPassword2: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (newValue) {
        this.$emit('update:visible', newValue)
      }
    }
  },
  methods: {
    // 切换password显示方式
    togglePasswordType () {
      // console.log(11111)
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    },
    // 切换password显示方式
    togglePasswordType2 () {
      // console.log(11111)
      this.passwordType2 = this.passwordType2 === 'password' ? 'text' : 'password'
    },
    // 关闭跳转
    close () {
      this.closeView(this.$route)
    },
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交表单
    async submit (ruleForm) {
      const { oldPassword, newPassword } = ruleForm
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await personChangePwd({ oldPassword, newPassword })
          if (res.code === '0000') {
            console.log(res.data)
            this.$message({
              message: '更新密码成功！',
              type: 'success'
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.app-submit-buttons {
  padding-left: 116px;
}
.fa {
  cursor: pointer;
}
</style>
